import React, { Component } from 'react'
import Hobbies from '../dulifile/Hobbies.js'
import Radio from '../dulifile/Radio.js'

const options = [
  { label: '唱歌', value: '唱歌' },
  { label: '睡觉', value: '睡觉' },
  { label: '打豆豆', value: '打豆豆' }
];

const RadioGroup = [
  { label: '男', value: '男' },
  { label: '女', value: '女' }
]

export default class StudentForm extends Component {

  state = {
    name:'',
    age:  '', 
    xingbie:'男',
    aihao:[]
  }

  componentDidMount(){
    // console.log(this.props.student.aihao)
    if (this.props.student && ! Array.isArray(this.props.student.aihao) ){
      this.props.student.aihao.split(',')
    }
    this.setState({...this.props.student})
  }
  
  handelInput=(st,e)=>{
    if(st === 'aihao'){
        if(e.target.checked){
          this.setState({ aihao: [...this.state.aihao , e.target.value] },()=>{
            // console.log(this.state.aihao)
          })
        }else{
          let arr = [...this.state.aihao]
          arr.splice(arr.indexOf(e.target.value), 1)
          this.setState({ aihao: arr},()=>{
            // console.log(this.state.aihao)
          })

        }
    }else{
      this.setState({[st]:e.target.value})
    }
  }

  onChangeAihao=(items)=>{
    // console.log(...items)
    this.setState({aihao:[...items]})
  }


  render() {
    let { deleBtn, saveHandle, student, isUpdate} = this.props
    // console.log('student', student)
    let{ aihao} = this.state

    return (
        <div className="modal" role="dialog" style={{display:'block'}}>
          <div className="modal-dialog" role="document">
            <div className="modal-content">
              <div className="modal-header">
              <button onClick={deleBtn}type="button" className="close"><span aria-hidden="true">&times;</span></button>
                <h4 className="modal-title">{isUpdate ? '修改':'新增'}学生信息</h4>
              </div>
              <div className="modal-body">
                  <div className="box-body">
                      <div className="form-group">
                       <label>姓名：</label>
                        <input type="text" value={this.state.name} className="form-control" onChange={this.handelInput.bind(null,'name')}/>
                      </div>
                      <div className="form-group">
                        <label>年龄： </label>
                       <input type="text" value={this.state.age} className="form-control" onChange={this.handelInput.bind(null,'age')}/>
                      </div>
                  </div>

                   {/* 性别 */}
                    <div className="form-group">
                      <label className="col-sm-2 control-label">性别：</label>
                       <Radio RadioGroup={RadioGroup}  saveHandle={saveHandle}/>
                        {/* <label className="radio-inline">
                          <input  checked={this.state.xingbie ==='男'} onChange={this.handelInput.bind(null,'xingbie')} type="radio" name='xingbie' value='男'/> 男
                        </label>
                        <label className="radio-inline">
                          <input checked={this.state.xingbie ==='女'}  onChange={this.handelInput.bind(null,'xingbie')} type="radio" name='xingbie' value='女'/> 女
                        </label> */}
                    </div> 
                    
                 
                    {/* 爱好 */}
                    <div className="form-group">
                      <label className="col-sm-2 control-label">爱好：</label>
                      <Hobbies 
                        options= {options} 
                        onChange={this.onChangeAihao}
                        value={aihao}
                      />

                        {/* <label className="radio-inline" >
                          <input type="checkbox" value="唱歌" checked={aihao.includes("唱歌")} onChange={this.handelInput.bind(null,'aihao')}/>唱歌
                      </label>
                        <label className="radio-inline">
                           <input type="checkbox" value="阅读" checked={aihao.includes('阅读')} onChange={this.handelInput.bind(null, 'aihao')}/>阅读
                       </label>
                        <label className="radio-inline">
                          <input type="checkbox" value="睡觉" checked={aihao.includes('睡觉')} onChange={this.handelInput.bind(null, 'aihao')} />睡觉
                      </label> */}
                  </div>
              </div>

              <div className="modal-footer">
                <button onClick={saveHandle.bind(null,this.state)} type="button" className="btn btn-primary">保存</button>
                <button onClick={deleBtn} type="button" className="btn btn-default">取消</button>
              </div>
            </div>
          </div>
        </div>
    )
  }
}
